/** 
  英语四六级统计
*/
<template>
  <div class="student-regist-container">
    <div style="height: 30px;">
      <el-breadcrumb style="float: left;" separator="/">
        <el-breadcrumb-item :to="{ path: '/englishScoreManage' }">
        <span @click="reback()" >{{ $t('englishScoreManage.management') }}</span></el-breadcrumb-item>
        <el-breadcrumb-item>{{ $t('englishScoreManage.statistics') }}</el-breadcrumb-item>
      </el-breadcrumb>
      <el-button style="float:right; padding:0;" type="text" @click="reback()">{{ $t('common.btn.back') }}</el-button>
    </div>
    <!-- <el-row type="flex" class="row-bg" justify="space-between">
      <div>
        <span @click="goBack" class="p_cals">{{$t('englishScoreManage.management')}}</span> / <span>{{$t('englishScoreManage.statistics')}}</span>
      </div>
      <el-button @click="cancelDialog" type="text">{{$t('requirement.back')}}</el-button>
    </el-row>
    <p></p> -->
    <condition-card @reset="resetSearch" @search="onSearch" label-position="right" label-width="150px">
        <el-row :gutter="24" style="height: 50px;">
          <el-col :span="8">
            <el-form-item :label="$t('cetStatistics.grade')">
              <el-date-picker style="width:100%" :clearable='false'
                v-model="queryForm.condition.grade" 
                value-format="yyyy"
                type="year">
              </el-date-picker>
             <!-- <el-select v-model="queryForm.condition.grade" style="width: 100%">
                <el-option
                    v-for="item in options.collegeYear"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select> -->
            </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item :label="$t('graduate.college')">
                <el-select v-model="queryForm.condition.college" filterable clearable style="width:100%">
                  <el-option
                      v-for="item in options.college"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
              </el-select>
                <!-- <DictSelect v-model="queryForm.condition.college" filterable :data="options.college" :plzSelect="true"></DictSelect> -->
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item :label="$t('cetStatistics.types')">
                  <el-select v-model="queryForm.condition.cetType" style="width: 100%">
                      <el-option label="英语四级" :value="1"></el-option>
                      <el-option label="英语六级" :value="2"></el-option>
                  </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item :label="$t('cetStatistics.studentType')">
                  <el-select v-model="queryForm.condition.educationTag" @change="changeCollegeYear" style="width: 100%">
                      <el-option label="本科生" :value="1"> </el-option>
                      <el-option label="研究生" :value="2"> </el-option>
                  </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="在校状态">
                <el-select v-model="queryForm.condition.leaveSchool" style="width: 100%;" clearable>
                    <el-option
                        v-for="item in options.leaveSchool"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
          </el-col>
        </el-row>
    </condition-card>
    <el-card shadow="never" v-loading="loading" body-style="padding: 24px;" class="card-margin">
      <h1 class="condition-title">{{$t('englishScoreManage.management')}}</h1>
      <div >
        <span style="font-size: 16px;">{{$t('cetStatistics.totalNumber')}}: {{tableDataList.totalNumber}}</span>
        <span style="margin-left:30px;font-size: 16px;">{{$t('cetStatistics.qualifiedNumber')}}: {{tableDataList.qualifiedNumber}}</span>
        <span style="margin-left:30px;font-size: 16px;">{{$t('cetStatistics.percentPass')}}: {{tableDataList.qualifiedRate}}</span>
        <span style="margin-left:30px;font-size: 16px;">{{$t('cetStatistics.goodNumber')}}: {{tableDataList.excellentNumber}}</span>
        <span style="margin-left:30px;font-size: 16px;">{{$t('cetStatistics.excellentRates')}}: {{tableDataList.excellentRate}}</span>
      </div>
      <edu-table :pagination="false" :tooltipEffect="tooltipEffect" stripe :data="tableData" size="mini" @selection-change="handleSelectionChange">
        <edu-table-column :label="$t('cetStatistics.grade')" prop="grade"></edu-table-column>
        <edu-table-column :label="$t('graduate.college')" prop="collegeI18n">
          <!-- <edu-table-column :label="$t('collegeRegistStatistics.college')" prop="calendarName">
            <template slot-scope="scope">
              {{scope.row.collegeAcademy | collegeAcademyList(options.title)}}
            </template>
          </edu-table-column> -->
        </edu-table-column>
        <edu-table-column :label="$t('cetStatistics.studentType')" prop="educationTagName"></edu-table-column>
        <edu-table-column :label="$t('cetStatistics.totalNumber')" prop="totalNumber"></edu-table-column>
        <edu-table-column :label="$t('cetStatistics.qualifiedNumber')" prop="qualifiedNumber"></edu-table-column>
        <edu-table-column :label="$t('cetStatistics.percentPass')" prop="qualifiedRate"></edu-table-column>
        <edu-table-column :label="$t('cetStatistics.goodNumber')" prop="excellentNumber"></edu-table-column>
        <edu-table-column :label="$t('cetStatistics.excellentRates')" prop="excellentRate"></edu-table-column>
      </edu-table>
      <!-- <el-row type="flex" class="row-bg" justify="end">
        <el-col>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryForm.pageNum_"
              :page-sizes="[20, 40, 80, 100]"
              :page-size="queryForm.pageSize_"
              layout="total, sizes, prev, pager, next, jumper"
              :total="queryForm.total_"
              style="float:right;margin-top:10px"
            ></el-pagination>
        </el-col>
      </el-row> -->
    </el-card>
  </div>
</template>
<script>
import { queryDic } from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
import subjectCompetitionApi from 'common/src/api/subjectCompetition/subjectCompetition';
import graduateStudent from 'common/src/api/graduateStudent/graduateStudent';
export default {
  props:{
    examId: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return{
      // queryForm: {}, //接收路由跳转的数据
      showTable: true,
      expand: true,
      internshipDemand: '',
      tableDataList: {
        totalNumber: 0,
        qualifiedNumber: 0,
        excellentNumber: 0,
        qualifiedRate: 0,
        excellentRate: 0,
      },
      dataForm: {
        opinion: '',
        fileList: [],
        achievementId: '',
        studentId: '',
        practiceId: '',
        calendarId: ''
      }, //表格数据
      internship: {
        opinion: ''
      },
      
      queryForm: {
        pageNum_: 1,
        pageSize_: 20,
        total_: 0,
        condition:{
          "cetType": 1,
          "grade": new Date().getFullYear()+'',
          "educationTag": 1,
          "leaveSchool": '',
          "college": ""
        }
      },
      curCheckStandard: '',
      curPracticeId: '',
      options: {
        college: [],
        collegeYear: [],
        leaveSchool: []
      },
      tableData: []
    }
  },
  created() {
    this.getOptions()
    this.getActDetail(this.queryForm.condition);
    // this.options.college.push(
    //       {
    //         label: '全校',
    //         value: '全校'
    //       },
    //       {
    //         label: '全校（剔除体育生、艺术生）',
    //         value: '全校（剔除体育生、艺术生）'
    //       }
    //     )
  },
  methods: {
    changeCollegeYear(val) {
      this.queryForm.condition.college = ''
      this.options.college = []
      this.getOptions()
    },
    // 筛选
    onSearch() {
      this.getActDetail(this.queryForm.condition);
    },
    // 重置
    resetSearch() {
      for (let key in this.queryForm.condition) {
        if (key === 'collegeAcademyList') {
          this.queryForm.condition.collegeAcademyList = [];
        } else if (key === 'majorList') {
          this.queryForm.condition.majorList = [];
        } else {
          this.queryForm.condition[key] = '';
        }
      }
      this.queryForm.condition.grade = new Date().getFullYear()+''
      this.queryForm.condition.cetType = 1
      this.queryForm.condition.educationTag = 1
      this.getActDetail(this.queryForm.condition);
    },
    cancelDialog() {
      this.$store.commit("delete_tabs", this.$route.path);
      this.$router.go(-1);
    },
    goBack() {
      this.$store.commit("delete_tabs", this.$route.path);
      this.$router.go(-1);
    },
   // 字典获取
    getOptions() {
      // 筛选条件字典查询
      let data = {
        lang: this.$store.getters.language || "cn",
        type: "allChild",
        keys: ['X_YX', 'X_LXZT']
      };
      queryDic(data).then(res => {
        UTILS.fillSelect(
          {
            college: "X_YX",
            leaveSchool: "X_LXZT"
          },
          res.data,
          this.options
        );
        if (this.queryForm.condition.educationTag==1) {
          this.options.college.push(
            {
              label: '全校',
              value: '全校'
            },
            {
              label: '全校（剔除体育生、艺术生）',
              value: '全校（剔除体育生、艺术生）'
            }
          )
        } else if (this.queryForm.condition.educationTag==2) {
          this.options.college.push(
            {
              label: '全校',
              value: '全校'
            }
          )
        }
      });
      
    },
    _fill(type, data) {
      for (let key in data) {
        this.options[type].push({
          value: key,
          label: data[key]
        })
      }
    },
    reback() {
      this.$emit('change-exam-create-index')
    },
    getActDetail(data) {
      subjectCompetitionApi.englishListsetStatistics(data).then(res => {
        // console.log(res);
        if (res.data) {
          this.tableData = res.data.records;
          this.tableDataList = res.data.statistic
        }
        
      });
    },
  },
}
</script>
<style lang="scss" scoped>
  .student-regist-container ::v-deep {
    .el-breadcrumb__item:last-child ::v-deep {
      .el-breadcrumb__inner {
        color: #606266;
        font-weight: bold;
        cursor: default
      }
    }
    .el-breadcrumb__item ::v-deep {
      .is-link {
        color: #aaa;
        font-weight: unset;
      }
      .is-link:hover {
        color: #409eff;
      }
    }
  }
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
.card-margin {
  .title-container {
    display: flex;
    align-items: center;
    .audit-title {
      font-size: 16px;
    }
  }
}
.inner-breadcrumb {
    .breadcrumb {
        span {
            font-weight: normal;
            color: #aaa;
        }
        a {
            font-weight: normal;
            color: #aaa;
        }
        a:hover {
            color: #409eff;
        }
        .last {
            font-weight: bold !important;
            cursor: default !important;
        }
        .disable {
            cursor: default !important;
        }
    }
}
.condition-title-p {
    font-weight: 400;
    font-style: normal;
    color: #2b3b4e;
    font-size: 18px;
    margin-bottom: 15px;
}
.base-info-title {
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #2b3b4e;
}
.table-style-baseinfo {
    background-color: rgba(210, 212, 214, 1);
    box-sizing: border-box;
    border-width: 0.5px;
    border-style: solid;
    border-color: rgba(210, 212, 214, 1);
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 100%;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #8896a7;
    margin-bottom: 20px;
}
.table-style-baseinfo td {
    width: 25%;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #2b3b4e;
    height: 32px;
    padding: 0 10px;
}
.table-style-baseinfo .text-right-background-color {
    background-color: #fdfeff4d;
    text-align: right;
}
.text-left-background-none {
    text-align: left;
}
</style>